import React, { useEffect, useState } from 'react';
import { Select, Button, Table, Input } from 'antd'
import './styles/systemhandle.scss'
import * as service from '../../../api/Statistics'
import ExportJsonExcel from "js-export-excel"

interface Props {

}
const { Search } = Input;
// 操作日志
function SystemHandle(props: Props) {
    const [data, setData] = useState([])
    // const [cate, setCate] = useState('') //监听select框数据
    // var [search1, setSearch1] = useState('')//监听搜索框查询数据
    // var [filterlist, setFilterlist] = useState([]) //过滤的数据

    var [pagination, setPagination] = useState({ current: 1, pageSize: 5});
    var getlist = () => {
        // 数据渲染
        service.handle_list().then((res) => {
            console.log(res);
            setData(res.data.data)
        })
    }
    useEffect(() => {
        getlist()
    }, [])

    const handleChange1 = (pagi: any) => {
        console.log(pagi);
        setPagination(pagi);//更新页码
      }

    //监听搜索框查询数据
    const onSearch = (value: string) => {
        console.log(value);
        service.handleSearch({ journalName: value }).then((res) => {
            console.log(res);
            setData(res.data.data)
        })
    };
    const columns = [
        {
            title: '序号',
            render: (_: any, record: never) => <a>{data.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },

        {
            title: '操作人',
            dataIndex: 'journalName',
        },
        {
            title: '操作时间',
            dataIndex: 'journalTime',
        },
        {
            title: 'IP',
            dataIndex: 'journalIp',
        },
        {
            title: '操作模块',
            dataIndex: 'journalModular',
        },
        {
            title: '操作详情',
            dataIndex: 'journalDetails',
        },

    ];
    let excel = () => {//导出Excel表
        let sheetFilter = ["journalName", "journalTime", 'journalIp', 'journalModular', 'journalDetails']//需要导出的属性，一般列表数据的属性
        let option = { fileName: "", datas: [{}] };
        option.fileName = "日志列表";
        option.datas = [
            {
                sheetData: data,//需要导出的数据
                sheetName: "日志列表",
                sheetFilter: sheetFilter,
                sheetHeader: ["姓名", "操作时间", "IP", "操作模块", "操作详情"],//每一列的列头
                columnWidth: [20, 20, 20, 20],//每一列的宽
            }
        ]
        let toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel();

    }
    return (
        <div className='system-handle'>
            <h4>操作日志</h4>
            <div className='handle-title'>
                <Search placeholder="请输入关键词" allowClear onSearch={onSearch} style={{ width: 200 }} />
                <Button onClick={() => { excel() }}>导出</Button>
            </div>
            <Table columns={columns} dataSource={data} rowKey={(row: any) => row.journalId}
                pagination={pagination}
          onChange={(pagi) => { handleChange1(pagi) }}

            />
        </div>
    );
}

export default SystemHandle;